<template>
  <div class="myImgCropper-box">
    <div class="myImgCropper">
      <div class="myImgCrop-operation">
        <img :src="imgUrl" alt="" id="imgBox">
      </div>
      <div class="myImgCrop-btn">
        <Button type="primary" size="small" @click="confirmCrop">确认裁剪</Button>
        <Button type="primary" size="small" @click="cancelCrp">取消</Button>

      </div>
    </div>

    <div class="myImgPreview-box" id="preBox">
      <div id="result" class="result-box"></div>
      <span class="infoTips">
        裁剪效果图
      </span>
    </div>
  </div>

</template>




<script type="text/ecmascript-6">
  export default{
    name:'imgCropper',
    props: {
      imgUrl:{
        type:String
      },
      id:{
        type:String
      },
      aspectRatio:{ //裁剪框宽高比：默认16:9
        type:String,
        default: '0/0'
      },
      previewRatio : {
        type:String,
        default: '92/142'
      }

    },
    data () {
      return {
        imgCorpObj:'', //裁剪对象
        cropData:'', //裁剪结果 detail- x,y,width,height,rotate,scaleX,scaleY
        cropper : null,
        val : ''
      }
    },
    computed:{
      ratio(){
        let whRatio=this.aspectRatio.split('/');
        return  (whRatio[0]/ whRatio[1]).toFixed(2);
      }
    },
    created(){
      this.val = this.imgUrl;
    },
    watch:{
      ratio:(value)=>{
        this.imgCorpObj.cropper('setAspectRatio',value);
      },
      imgUrl(value) {
        if (value != this.val && value) {
          this.imgCorpObj.replace(value,true)
        }
      }
    },
    mounted(){
      this.init();
    },
    methods:{
      init() {
        if(!this.imgUrl) {
          return;
        }
        let _this=this;
        let image = document.querySelector('#imgBox');
        console.log(_this.ratio)
        this.imgCorpObj = new Cropper(image,{
          aspectRatio:_this.ratio,   //正数
          viewMode:2,
          dragMode:'move',
          crop: function(event) {
            _this.cropData=event.detail;
          }
        })
      },
      confirmCrop(){ //确认裁剪
        let _previewRatio;
        if (this.previewRatio) {
          _previewRatio = this.previewRatio.split('/');
        }
        let cropResult=this.imgCorpObj.getCroppedCanvas(
          {
          width:_previewRatio[0],
          height:_previewRatio[1]
          }
        );
        let resultImg = document.createElement('img');
        // let whRatio=this.ratio.split('/');
        // if(parseInt(whRatio[0])>=parseInt(whRatio[1])){
        //   resultImg.style='max-width:100%; height:auto;';
        // }else{
        //   resultImg.style='max-height:100%; width:auto;';
        // }
        resultImg.src = cropResult.toDataURL();
        console.log(resultImg.src);

        result.innerHTML = '';
        result.appendChild(resultImg);
        document.getElementsByClassName('myImgPreview-box')[0].style.visibility='visible';
        this.$emit('copperData',this.cropData);
      },
      cancelCrp(){
        this.imgCorpObj.reset();
        this.$emit('cancelCrop',true);
      }
    }

  }
</script>

<style scoped lang="scss">

  .myImgCropper-box{
    overflow: hidden;
  }
  .myImgCropper{
    float:left;
  }
  .myImgPreview-box{
    float:left;
    width:320px;
    height:180px;
    margin-left:20px;
    background: #f8f8f8;
    position: relative;
    border:1px solid #e7e7e7;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.8);
    visibility: hidden;
    img{
      max-height:100%;
      max-width:100%;
    }
  }
  .infoTips{
    font-size:12px;
    padding:1px 5px;
    background-color: #409eff;
    position:absolute;
    right:10px;
    top:0px;
    color:#fff;

  }
  .myImgCrop-btn{
    float:left;
    width:320px;
    padding:10px 0;
    text-align: left;
  }
  .myImgCrop-operation{
    width:320px;
    height:180px;
    background-color:#f2f2f2 ;
  }
  .myImgCrop-operation img{
    max-width:100%;
    max-height: 100%;;
  }
  .result-box{
    text-align: center;
    width:100%;
    height:100%;
  }

</style>
